<template>
	<view>
		<!-- 	<view class="wechatapp">
			<view class="header">
				
				<image class="image" :src="storeInfo && storeInfo.image_url ? storeInfo.image_url : '/static/logo.png'">
				</image>
			</view>
		</view>
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="login-btn">
		
			<button class="button btn-normal" @click.stop="getCode()">授权登录</button>
		</view> -->
		<tn-nav-bar fixed :bottomShadow="false">登录</tn-nav-bar>
		<view class="container" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view style="text-align: center;margin-top: 35%;">
				<image src="/static/logo.png" style="width: 200rpx;height: 200rpx;"></image>
				<view style="font-weight: bolder;font-size: 22px;margin-top: 1%;">海报</view>
			</view>
			<tn-form :model="form" ref="form" labelWidth="130">
				<tn-form-item label="手机号" prop="name">
					<tn-input v-model="form.name" />
				</tn-form-item>
				<tn-form-item label="验证码" prop="intro">
					<tn-input v-model="form.intro" />
					<template slot="right">
						<tn-verification-code :seconds="seconds" @end="end" @start="start" ref="verificationCode"
							startText="发起验证码" @change="codeChange"></tn-verification-code>
						<tn-button @tap="getverification()">{{tips}}</tn-button>
					</template>
				</tn-form-item>
			</tn-form>
			<button class="button btn-normal" @click.stop="getfllotw()">授权登录</button>
		</view>

		<view class="no-login-btn">
			<button class="button btn-normal" @click="handleCancel">暂不登录</button>
		</view>
		<user-modal :isShow="isAvater" @editSuccess='getAvaterInfo'></user-modal>
	</view>
</template>

<script>
	import userModal from '@/components/xghc-editUserModal/index.vue'
	import store from '@/store'
	import Config from '@/core/config'
	export default {
		data() {
			return {
				// 微信小程序登录凭证 (code)
				// 提交到后端，用于换取openid
				isAvater: 0,
				name: '',
				partyData: {
					oauth: '',
					userInfo: {
						nickName: '',
						avatarUrl: ''
					},
					code: '',

				},
				data: [],
				tips: '发起验证码',
				seconds: 60
			}
		},
		components: {
			userModal
		},
		created() {
			/*#ifdef APP-PLUS*/
			this.oauth = "app"
			/*#endif*/
			/*#ifdef H5*/
			this.oauth = "H5"
			/*#endif*/
			/*#ifdef MP*/
			this.oauth = "MP-WEIXIN"
			/*#endif*/
		},
		methods: {
			//发起验证码
			getverification() {
				this.$refs.verificationCode.start()
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.api.xxx.then((result) => {
					uni.hideLoading()
					uni.showToast({
						title: '验证码已发送',
						duration: 2000,
						icon: 'none'
					});

				})
			},
			getfllotw() {
				this.api.xxx.then((result) => {
					this.getCode()
				})
			},
			// 获取code
			// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
			getCode() {
				const that = this
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						"onlyAuthorize": true,
						success: res => {
							that.partyData.code = res.code
							that.isAvater = 1
						},
						fail: reject
					})
				})
			},
			codeChange(text) {
				this.tips = text
			},
			getAvaterInfo(info) {
				this.partyData.userInfo.nickName = info.nickname
				let that = this
				uni.showToast({
					title: "请稍等片刻~",
					duration: 2500,
					icon: 'loading'
				})
				if (info.avatar != 'https://flm.heied.cn/static/avatar.png') {
					const apiUrl = Config.get('apiUrl');
					uni.request({
						url: apiUrl + '/api/upload/image', //仅为示例，非真实的接口地址
						method: 'post',
						data: {
							file: info.avatar,
						},
						header: {
							'token:': 'e3324182911daacc0643d6a081f8cae7'
						},
						name: 'file',
						success: (uploadFileRes) => {
							console.log(uploadFileRes);
							that.partyData.userInfo.avatarUrl = uploadFileRes.data.fileInfo.external_url
							that.update()
						}
					});
				} else {
					console.log("默认图片");
					that.updateUser("https://flm.heied.cn/static/avatar.png")
				}
			},
			//更新数据
			update() {
				const from = {
					partyData: this.partyData
				}
				this.api.loginMpWx(from).then((result) => {
					console.log(result, 11);
					this.data = result
					this.api.userDetails().then((result) => {
						console.log(result, 222);
						uni.setStorage('userInfo');
						uni.setStorage('token');

					})
				}).fail((err) => {
					console.log(result);
				})
			},

			end() {
				this.$tn.messageUtil.toast('倒计时结束')
			},
			start() {
				this.$tn.messageUtil.toast('倒计时开始')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);

			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			background: #04be01;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			background: #dfdfdf;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>